<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" class="mini-xs mini-sm mini-md mini-lg mini-lg-active">
<head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>登陆</title>  
        <style type="text/css">
	        html,body{
	        	width: 100%;
	    		height: 100%;
	    		margin: 0;
	    		padding: 0;
	    		overflow: hidden;
	        }
	        body{
	        	background: url("/image/login_bg.png") no-repeat center center;
				background-size: cover;
	        }
        	a { cursor: pointer; }
        	.login-box{
        		width: 1200px;
        		height: 100%;
        		margin: 0 auto;
        		padding: 20px 0;
        		display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
			    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
			    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
			    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
			    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
			    flex-direction: column;
        	}
        	.login-top{
				margin-bottom: 60px;
				/*margin-left: 10px;*/
        	}
        	.login-bottom{
				display: flex;
				flex-direction: row;
        	}
        	.login-left{
        		margin-right: 60px;
        		flex: 1;
        	}
        	.login-title{
        		/*height: 60px;  
			   line-height: 60px;  */
			    /*padding-left: 100px;*/
        		font-size: 40px;
        		line-height: 40px;
        		padding-bottom: 60px;
        		padding-top: 126px;
        	}
        	.login-title .line {  
			   display: inline-block;  
			   width: 136px;  
			   border-top: 1px solid #ffffff; 
			   line-height: 40px;
			   padding-right: 4px;
			}  
			.login-title  .tex{
				color: #ffffff;  
   				vertical-align: middle;
   				vertical-align: -30%;
			}
			.login-subheading{
				color:#ffffff;
				color: rgb(255,255,255,0.8);
				filter:alpha(Opacity=40);
				opacity:0.80;
				-moz-opacity:0.80;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
				font-size: 34px;
				font-style: oblique;
				margin-bottom: 20px;
				/*padding-left: 100px;*/
			}
			.span-border{
				padding-bottom: 10px;
				border-bottom: 1px solid #ffffff;
			}
        	.login-list ul{
        		/*padding-left: 100px;*/
        		list-style-type: none;
        	}
        	.login-list ul li{
        		color:#ffffff;
				color: rgb(255,255,255,0.8);
				filter:alpha(Opacity=40);
				opacity:0.80;
				-moz-opacity:0.80;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
				font-size: 14px;
				line-height: 24px;
        	}
        	.login-right{
        		padding-right: 100px;
        	}
        	.loginForm{
        		width: 390px;
				height: 500px;
				/*background: rgba(255,255,255,1);*/
				position: relative;
        	}
        	.from-title h2{
        		padding-top: 60px;
        		padding-bottom: 50px;
				padding-left: 35px;
				font-size: 28px;
				line-height: 28px;
				color:#ffffff;
				text-align:left;
        	}
        	.username-box,.psd-box{
        		height: 56px;
        		line-height: 56px;
        		width: 320px;
        		margin: 0 auto;
        		border: 2px solid #ffffff;
        	}
        	.username-box{
        		margin-bottom: 58px;
        	}
        	.mini-textbox{
        		border: 0;
				color: #ffffff;
        		background: #ffffff!important;
        	}
			.mini-textbox-input{
				color: #ffffff;
			}
        	.form-img{
				padding-left: 10px;
        		padding-right: 10px;
				border-right: 2px solid #ffffff;
        		vertical-align: middle;
        	}
        	.login-button{
        		display: flex;
        		justify-content: flex-end;
        		padding-top: 58px;
				padding-right: 35px;
				position: relative;
        	}
        	.login-btn{
				background: rgba(2,204,195,0.5);
				height: 56px;
				line-height: 56px;
				width: 120px;
				display: block;
				/*margin: 0 auto;*/
				text-align: center;
				color: #ffffff;
				border-radius: 4px;
				font-size: 18px;
			}
			input:focus { outline: none; }
			input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 400px #69707d inset;
				-webkit-text-fill-color: #ffffff;
				transition: background-color 5000s ease-in-out 0s; }
			input:-webkit-autofill:focus {
				background: transparent!important;
			}
			input:-webkit-autofill:hover {
				background: transparent!important;

			}
			.mini-textbox{
				background-color: transparent!important;
			}
			.mini-required .mini-textbox-border, .mini-required .mini-buttonedit-border{
				background-color: transparent!important;
			}
			.mini-textbox-border{
				border: 0!important;
			}
			.mini-required .mini-textbox-border, .mini-required .mini-buttonedit-border{
				background-color: transparent!important;
			}
			a{
				text-decoration:none;
				cursor: pointer;
			}
			.puffBox{
				background:rgba(2,204,195,0.5);
				border-radius: 4px;
				color: #ffffff;
				width: 120px;
				height:56px;
				top: 58px;
				right: 35px;
				font-size: 18px;
				text-align: center;
				line-height: 56px;
				position: absolute;
				z-index: 9999;
				display: none;
			}
        </style>
        <script src="/scripts/boot.js"></script>
		<script src="/scripts/canvas-particle.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                //配置
                var config = {
                    vx: 4,	//小球x轴速度,正为右，负为左
                    vy: 4,	//小球y轴速度
                    height: 2,	//小球高宽，其实为正方形，所以不宜太大
                    width: 2,
                    count: 200,		//点个数
					color:"255,255,255",
                    stroke:"255,255,255",
                    // color: "121, 162, 185", 	//点颜色
                    // stroke: "130,255,255", 		//线条颜色
                    dist: 6000, 	//点吸附距离
                    e_dist: 20000, 	//鼠标吸附加速距离
                    max_conn: 10 	//点到点最大连接数
                }

                //调用
                CanvasParticle(config);
            };
            function login(){
    			var form = new mini.Form("#loginForm");
        		form.validate();
	            if (form.isValid() == false) return;
	            var data = form.getData();      //获取表单多个控件的数据
                $(".login-btn").hide();
                $(".puffBox").show();
	            $.ajax({
					type : "post",
					url : "/login",
					data : data,
					success : function(msg) {
						if(msg.state){
							window.location.href="/";
                            $(".login-btn").show();
                            $(".puffBox").hide();
						}else{
                            layer.msg(msg.message, {icon: 5});
                            $(".login-btn").show();
                            $(".puffBox").hide();
						}
					}
				});
        	}
            if(window !=top){
                top.location.href=location.href;
            }
            $(document).keydown(function(event){
                if(event.keyCode==13){
                    $('#aa').click();
                }
            });
        </script>
    </head>  
    <body>
	<div id="mydiv" style="height:1000px; width: 2000px;">
		<div class="login-box">
			<div class="login-top"><img src="/image/logo.png" alt="" /></div>
			<div class="login-bottom">
				<div class="login-left">
					<div class="login-title">
						<span class="line"></span><span class="tex">计划管理系统</span>
					</div>
					<div class="login-subheading">
						<span class="span-border">解决无法</span>管理的管理
					</div>
					<div class="login-list">
						<ul>
							<li>满惠科技将长期致力于企业及政务机关最佳信息化解决方案研究</li>
							<li>不断触数据算法、智能交互、移动互联等先进互联网技术</li>
							<li>为客户提供的管理思路、方法、工具</li>
							<li>解决客户长期无法管理的难点痛点</li>
						</ul>
					</div>
				</div>
				<div class="login-right">
					<form id="loginForm" class="loginForm" action="/login" method="post">
						<div class="from-title">
							<h2>欢迎使用</h2>
						</div>
						<div class="username-box">
							<img src="/image/userName1.png" class="form-img" alt="" />
							<input name="username" type="text" class="mini-textbox" style="background:transparent!important;color: #ffffff" emptyText="请输入您的账号" required="true" vtype="maxLength:48">
						</div>
						<div class="psd-box">
							<img src="/image/psd1.png" class="form-img" alt="" />
							<input name="password" type="password" textmode="password" class="mini-password" emptyText="请输入您的密码" required="true" vtype="maxLength:48">
						</div>
						 <div id="aa" onclick="login()" class="login-button">
							 <!--<a href="#"><img class="log-img" src="/image/login-button.png" alt="" /></a>-->
							 <a href="#" class="login-btn">登录</a>
							 <div class="puffBox"><img src="/image/puff.svg" style="vertical-align: middle" alt="">认证中...</div>
						 </div>
					</form>

				</div>
			</div>
		</div>
	</div>
  </body>
 </html>